<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header,
        main,
        footer {
            width: 1000px;
            margin: 0 auto;


        }

        header {

            height: 200px;
            background-color: silver;

            /* 设置居中 */
        }

        main {

            height: 400px;
            background-color: #bfa;
            margin: 15px auto;
            /* 中间的main 上下10个px 左右居中 */



        }

        nav,
        article,
        aside {
            float: left;
        }

        nav {
            width: 190px;
            height: 100%;
            background-color: yellow;

        }

        article {
            box-sizing: border-box;
            /* 指定可见框的大小 不包括 margin  */
            width: 600px;
            height: 100%;
            background-color: orange;
            /* margin不在可见框  但是还是占地方 */
            margin: 0 10px;


        }

        aside {
            width: 190px;
            height: 100%;
            background-color: pink;
        }

        /* 垂直排列 写成块元素  */
        /* 水平排列 块 设置浮动  而且全都要浮动 */
        /* 3个都是块元素 会独占一行 */
        /* 垂直排列 */
        /* 内容溢出 */
        footer {

            height: 150px;
            background-color: tomato;

            /* 这三个里面又样式是重复的 可以移走 */
            /* 让三者之间又间隔  可以设置上面两个外边距  */
            /* 或者中间 上下 外边距 */
            /* 目的是让三者之间又距离 */
        }
    </style>
</head>

<body>
    <!-- 把网页分成一块一块 -->
    <header></header>
    <!-- 头部 -->
    <main>
        <!-- main中加入3个块元素  -->
        <!-- 从左到右 3个块元素 -->
        <nav></nav>
        <article></article>
        <aside></aside>
        <!-- 真正写的时候可以全都用div 这是没有关系的 -->
    </main>
    <!-- 只有一个主题 -->
    <footer></footer>
</body>

</html>